﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Add / Delete Shifts</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>

    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/bootstrap-responsive.css" rel="stylesheet">
</head>
<body>
    <div class="row show-grid">
        <div class="span1">
            <input id="shiftName" type="text" />
        </div>
        <div class="span2 offset2">
            <button type="button" onclick="insertShift()">Add new shift</button>
        </div>
    </div>
    <div class="row show-grid">
        <div class="span1">
            <input id="shiftID" type="text" />
        </div>
        <div class="span2 offset2">
            <button type="button" onclick="deleteShift()">Delete shift with ID:</button>
        </div>
    </div>
    <div class="accordion" id="accordion2">
        <div class="accordion-group">
            <div class="accordion-heading">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
                    <div class="row">
                        <div class="span4">
                            <div class="span1">
                                ShiftID
                            </div>
                            <div class="span2">
                                ShiftName
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <div id="collapseOne" class="accordion-body collapse in">
                <div class="accordion-inner">
                    <div id="existingShifts"></div>
                </div>
            </div>
        </div>
    </div>
    <script language="javascript" type="text/javascript">
        function insertShift() {
            $.post('insertShift.php', { shiftName: document.getElementById("shiftName").value }, function (data) {
                var existingShifts = document.getElementById("existingShifts");
                //existingShifts.innerHTML = data;
                parseResults(existingShifts, data)
            });
        }
        function deleteShift() {
            $.post('deleteShift.php', { shiftID: document.getElementById("shiftID").value }, function (data) {
                var existingShifts = document.getElementById("existingShifts");
                existingShifts.innerHTML = data;
            });
        }
        function parseResults(existingShifts, data) {
            var jsonData = eval(data);
            var newRow = "";
            var color = "";
            if (jsonData.length > 0) {
                newRow = ""
                ;

                for (var i = 0; i < jsonData.length; i++) {
                    var row = jsonData[i];
                    if (i % 2 == 0)
                        color = "style = \"background-color: #AAFFAA\"";
                    else
                        color = "style = \"background-color: #CCFFCC\"";
                    newRow +=
                        "<div class=\"row\"" +
                        ">" +
                        "<div class=\"span4\"" +
                        color +
                        ">" +
                        "<div class=\"span1\"" +
                        ">" +
                        row.ShiftID +
                        "</div>" +
                        "<div class=\"span2\"" +
                        ">" +
                        row.ShiftName +
                        "</div>" +
                        "</div>" +
                        "</div>"
                    ;
                }
            }
            else {
                newRow = "No data found";
            }
            existingShifts.innerHTML = newRow;
        }
        function encloseInSpanX(content, x) {
            var outString = "<div class=\"span" + x + "\">";
            outString += content;
            outString += "</div>";
            return outString;
        }
        function encloseInRow(content) {
            var outString = "<div class=\"row\">";
            outString += content;
            outString += "</div>";
            return outString;
        }
    </script>
</body>
</html>
